// 车险订单保费
<template>

<div class="car-price-list">

    <Tabs :value='current'>

        <TabPane label="费用信息" name='valInfo'>
            <div class="header" :class='{hasVal: total > 0}'>
                <div class="total">
                    合计: {{total}} ￥
                </div>
            </div>
            
            <!-- 费用输入表单 -->
            <div class="content">
                <c-common-form :data='data' :mods='mods'></c-common-form>
            </div>

        </TabPane>

        <!-- 支付途径选择 -->
        <TabPane label="支付途径" name='payment' v-if='hasPayment'>
            <div class="payment-voucher">
                <l-payment-menthod :disabled='paymentDisabled' :data='data'></l-payment-menthod>
            </div>   
        </TabPane>
        
        <!-- 支付凭证上传 -->
        <TabPane label="支付凭证" name='voucher' v-if='hasVoucher'>
            <l-payment-voucher :disabled='voucherDisabled' :data='data'></l-payment-voucher>
        </TabPane>

    </Tabs>
   
    
</div>

</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'

const paymentMenthod = () => import('@/components/ivew_components/car_price_list/payment_menthod.vue')
const paymentVoucher = () => import('@/components/ivew_components/car_price_list/payment_voucher.vue')

@Component({
    components:{
        'l-payment-menthod': paymentMenthod,
        'l-payment-voucher': paymentVoucher
    }
}) 
export default class carPriceLlist extends Vue{
    name:string = 'car-price-list'

    @Prop()
    data

    @Prop()
    mods

    // 是否支付
    @Prop()
    hasPayment:boolean

    // 是否上传凭证
    @Prop()
    hasVoucher:boolean

    // 当前状态
    @Prop({
        default: 'valInfo'
    })
    current:'valInfo' | 'payment' | 'voucher'

    // 支付途径是否可用
    @Prop()
    paymentDisabled:boolean
    
    // 支付凭证是否可用
    @Prop()
    voucherDisabled:boolean

    @Watch('data')
    onDataChange(newVal,oldVal){ 
        this.dataCache = newVal;
    }

    dataCache = this.data;
    
    // 计算合计
    get total():number{
        let totalVal = 0;
        let data = this.dataCache;
        let keys = ['jqPrice', 'syPrice', 'tax']
        
        keys.forEach(key =>{
            let val = parseFloat(data[key]);
            totalVal +=  isNaN(val) ? 0 : val;
        })

        totalVal = Math.ceil(totalVal * 1000) / 1000;

        return totalVal
    }
     
}

</script>

<style scoped lang='scss'>

.car-price-list{
    
    .header{
        margin-bottom: _rem(20px);
        padding: _rem(10px); 
        border-radius: $border-radius;
        background: $default_bg;        
        
        font-size: $font_larg; 
        color: $disabled_color;
        transition: all $transition_time;
    }
    .header.hasVal{
        box-shadow: iconHoverShadow($color: #ff9f87);
        background:  $danger_color;
        color:  #fff;
    }
    
    .payment{
        margin-top: _inervals(4);
    }
    

}


</style>